<template>
  <NowLoading v-if="firstLoading"/>
  <div v-else class="cont-detail">
    <van-nav-bar
  :title="title"
  left-arrow
  @click-left="$router.back()"
/>
 <div class="entity-circle"  @click="$router.push({path:'/micircle',query:{id:detail?.products[0]?.product_id}})">
<div class="entity-circle-name">
  <van-image
  v-if="detail.entity_circle"
  class="personl-img"
  width="2rem"
  height="2rem"
  :src="detail.entity_circle?.img"
/>
<span>{{ detail?.entity_circle?.name }}</span>
</div>
<div class="hot">{{ detail.entity_circle?.hot }}热度<van-icon name="arrow" /></div>
</div>

 <div class="content">
<FollowView :nickname="detail.nickname" :create_time="detail.create_time" :dev_type="detail.dev_type" :icon="detail.icon" :mid="detail.mid" :id="id" :cont="detail"/>
  <p class="detail-content">{{ detail.content }}</p>
  <div class="pic-list"  v-if="detail.pic_list">
    <van-image
    v-for="i in detail.pic_list"
  class="pic-img"
  :src="i.img"
/>
  </div>
</div> 
 <!-- <div class="discuss">
  <div class="comment-num" v-if="detail.comment_num">共<span v-if="!detail.comment_num">0</span>{{ detail.comment_num }}条评论</div>
   <div class="self">
<div   class="self-img">
  <van-image
    v-if="detail.cur_user_info"
  width="2rem"
  height="2rem"
  :src="detail.cur_user_info.avatar"
/>
</div>
<van-search class="now-discuss"  placeholder="来说点什么..." />
   </div>
</div>  -->
<div class="join-discuss">
  <van-search v-model="disValue" 
  @search="onSearch" 
   class="discuss" left-icon="comment-circle-o" placeholder="一起讨论吧~" v-if="detail.products"/>
  <div class="buy" v-else  v-for="pro in detail.products" :key="pro.product_id">
  <span>{{ pro.price }}</span> <span>立即购买<van-icon name="arrow" /></span>
</div>

<div class="share" >
  <van-icon name="share-o" size="1.35rem" color="#7a7a7a"/>
</div>
<div class="praise-num" ><van-icon name="chat-o" size="1.35rem" /><span>
  {{ detail.comment_num }}
</span></div>

<div class="praise-num"><van-icon name="good-job-o" size="1.35rem" color="#7a7a7a"/><span>{{detail.praise_num  }}</span></div>
</div>  
<div class="answer-list-content" v-if="comment">

  <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
    <div class="answer-list-item" v-for="item in comment" :key="item.id">
 <div class="answer-img">
  <van-image
  round
  width="1.75rem"
  height="1.75rem"
  :src="item.img"
/>
 </div>

<div class="answer-right">
  <div class="answer">
    <div>
    <span  class="nickname">{{ item.nickname }}</span>
    <span>{{ item.create_time }}</span>
  </div>
    <div >
      <span class="support-num">{{ item.support_num }}</span>
      <van-icon name="good-job-o" size="1.1rem"/>
    </div>
</div>
  <p class="answer-content">{{ item.comment }}</p>
</div>
    </div>
  </van-list>


  </div>
  <div class="no-comment" v-else>
    暂时还没有评论~
  </div>
  </div>
</template>

<script setup lang="ts">
import FollowView from '../../../../components/FollowView.vue'
import { useRoute, useRouter} from 'vue-router'
import { getContentDetail , getBuyShowDetail,getContentCommentList,getBuyShowCommentList,} from '../../../../api/find'
import type {  contentDetail,contentComment } from '../../../../typings';
import { onMounted,ref,nextTick ,onBeforeUnmount} from 'vue'

const route = useRoute();  //调用
const router = useRouter();  //调用
let disValue = ref<string>('');
const detail = ref<contentDetail>();
const comment = ref<Array<contentComment>>([]);
const title = ref<string>('');
const firstLoading = ref(true);
const loading = ref(false);
const finished = ref(false); 
const page = ref(1);
const id = ref<number>();
 id.value = Number(route.query.id);
onMounted(() => {
  getData(id.value);
  getLoading();
}
)
const getData = async (id: number) => {
  if (String(id).length === 7) {
    title.value = '内容详情';
    let res = await getContentDetail(id);
    let rescom = await getContentCommentList(id,page.value);
    comment.value = rescom.data.comment_list;
    detail.value = res.data;
    firstLoading.value = false;
  } else {
    title.value = '买家秀';
    let res = await getBuyShowDetail(id);
    let rescom = await getBuyShowCommentList(id,page.value);
    comment.value = rescom.data.comment_list;
    detail.value = res.data;
    firstLoading.value = false;
   }
}
const getComment = async (id:number,p:number) => {
  if (String(id).length === 7) {
    let rescom = await getContentCommentList(id,p);
    comment.value = [...comment.value, ...rescom.data.comment_list];
  } else {
    let rescom = await getBuyShowCommentList(id,p);
    comment.value = [...comment.value, ...rescom.data.comment_list];
   }
  
}
const onSearch = () => {
    let obj = {
        nickname: '我',
        create_time: new Date().getHours() + ' : '+ new Date().getMinutes()+' : '+new Date().getSeconds(),
        comment: disValue.value,
        img:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    }
    comment.value.unshift(obj);
    disValue.value = '';

      
    
  }
const getLoading = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
}

const onLoad = () => {
  page.value += 1;
      setTimeout(() => {
     getComment(id.value,page.value);
     nextTick(() => {
       loading.value = false;
       page.value += 1;
        })
        if (comment.value.length >= 1000) {
          finished.value = true;
        }
      }, 1000);
};
onBeforeUnmount (()=>{
  getLoading();
  onLoad();
    }
)
// const goMizone = () => {
//   router.push({path:'/micircle',query:{id:detail?.products[0].}})
// }
</script>

<style lang="scss" scoped>

:deep(.van-nav-bar__title) {
    color: #666666;
    font-weight: normal;
}

:deep(.van-nav-bar__arrow) {
    color: #919191;
    font-size: 1.5rem;
}
.cont-detail {
  position: fixed;
  width: 100vw;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #f5f5f5;
  overflow: scroll;
  z-index: 99999;
 
}
.entity-circle{
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  background-color: #fff;
  .entity-circle-name {
    display: flex;
    align-items: center;
  }
  .hot {
    color: #999;
  }
}
.content {
  background-color: #fff;
  margin-top: .2rem;
  padding: 1rem;
  border-bottom: 1px solid #f5f5f5;
}

.attention  {
  margin-top: .2rem;
  border: 1px solid #ff5528;
  border-radius: 99999rem;
  padding: .35rem 1.2rem;
  font-weight: 500;
  background: #fff;
  font-size: .78rem;
  color: #ff5528;
}
.detail-content {
  color: #333;
  font-size: .95rem;
}
.pic-list {
  width: 100%;
  //  .pic-img{
  //   max-width: 40%;
  //  }
}
.discuss {
  padding: 1rem;
  background-color: #fff;
  .comment-num{
   font-size:.8rem;
   color:#333;
   margin-bottom:.4rem;
  }
  .self {
    display: flex;
    .now-discuss {
    padding: .4rem;
     background-color: #f6f6f6;
     border-radius: 9999rem;
    }
    .self-img {
      margin-right:.6rem;
    }
  }
}
.join-discuss {
  position: fixed;
  bottom: 0;
  padding: .3rem 1rem;
  height: 3.2rem;
  width: 100vw;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
.discuss{
  width: 40vw;
  background-color: #f6f6f6;
  border-radius: 9999rem;
  display: flex;
  align-items: center;
  padding: .3rem .5rem;
}
.praise-num{
    color: #7a7a7a;
    font-size: .85rem;
  }
}
.answer-list-content{
  padding-bottom: 10rem;
  background-color: #fff;
}
.answer-list-item{
  display: flex;
  padding: .8rem 1rem;
  background-color: #fff;
  .answer-img {
    margin-right: 1rem;

  }
  .answer-right{
    width: 100%;
    border-bottom:.05rem solid rgba(0,0,0,.1);
    .answer {
      display: flex;
    justify-content: space-between;
    color: rgba(0,0,0,.5);
    font-size: .8rem;
    .nickname {
      margin-right: 1rem;
    }
    .support-num {
      color: #333;
      margin-right: .2rem;
    }
    }
    .answer-content {
      font-size: .85rem;
      margin: .2rem 0rem .6rem;
    }
 
   
  }
}
.no-comment{
  font-size: .8rem;
  color: #757575;
  text-align: center;
  padding: 2rem 1rem 10rem;
}
.buy {
  background-color: #ff5528;
  color: #fff;
  // font-size: .8rem;
  padding: .35rem .5rem; 
  border-radius: 9999rem;
}
.share {
  background-color: #fff;
}
</style>